<template>
  <div class="app-container">
    <div class="main-left">
      <h4 class="form-header h4">活动详情</h4>
      <el-form ref="form" :model="form" label-width="80px">
        <el-row>
          <el-col :span="12">
            <el-form-item label="活动名称" prop="activityName">
              <el-input v-model="form.activityName" readonly="readonly"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="报名对象" prop="deptName">
              <el-input v-model="form.deptName" readonly="readonly"/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="时间" prop="activityTime">
              <el-input v-model="form.activityTime" readonly="readonly"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="活动地点" prop="place">
              <el-input v-model="form.place" readonly="readonly"/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="人数要求" prop="num">
              <el-input v-model="form.num" readonly="readonly"/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="活动奖励:" prop="reward">
              <el-input v-model="form.reward" readonly="readonly"/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="报名时间:" prop="reward">
              <el-date-picker
                readonly="readonly"
                v-model="datevalue"
                type="datetimerange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期">
              </el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="活动内容">
              <editor v-model="form.intro" :min-height="192"/>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer" align="center" v-hasPermi="['zq:entryblank:apply']" >
        <el-button v-if="entryBlank.pitchOn === 0 " type="danger" @click="applyEntry">取 消</el-button>
        <el-button v-if="entryBlank.pitchOn === undefined || entryBlank.pitchOn === -1" type="primary"
                   @click="applyEntry">报 名
        </el-button>

      </div>
    </div>

    <!--   报名的人以及筛选后的穿梭框（transfer） -->
    <div class="main-right" v-hasPermi="['zq:entryblank:listApply']">
      <h4 class="form-header h4">报名情况</h4>
      <el-transfer
        v-model="selectValues"
        :props="{
          key: 'userId',
          label: 'userName',
          agvGrade:'agvGrade'
        }"
        :data="transferData"
        :titles="['未选中','已选']"
      >
        <div slot-scope="{ option }">
          <el-tooltip effect="light" placement="top">
            <div slot="content">
                <el-rate
                  v-model="option.agvGrade"
                  disabled
                  show-score
                  text-color="#ff9900"
                >
                </el-rate>
            </div>
            <span>{{ option.userName }}</span>
          </el-tooltip>
        </div>
      </el-transfer>
      <div slot="footer" class="dialog-footer" align="center">
        <el-button type="primary" @click="checkedListApply()">确 定</el-button>
      </div>
    </div>
  </div>
</template>

<script>
  import {getVolunteer} from "@/api/volunteer/volunteerActivity";
  import {apply, getInfoEntryBlank, listEntryBlank, grade, listApply} from "@/api/volunteer/entryBlank";
  import {isStudent } from "@/api/volunteer/index";
  // 用于构造穿梭框数据
  import {filterDataByPitchOn} from "./tools";

  export default {
    name: "getInfo",
    data() {
      return {
        activityId: '',
        // 遮罩层
        loading: true,
        // 分页信息
        total: 0,
        pageNum: 1,
        pageSize: 10,
        //表单信息
        form: {},
        //时间范围
        datevalue: [],
        //报名表
        entryBlank: {
          pitchOn: -1
        },
        //穿梭框数据
        transferData: [],
        // 穿梭框选中
        selectValues: [],
        //是否为学生参数
        isStudent: undefined
      };
    },
    created() {
      // 异步执行

      const activityId = this.$route.params && this.$route.params.activityId;
      this.activityId = activityId
      console.log(this.activityId)

      if (activityId) {
        this.loading = true;
        getVolunteer(activityId).then((response) => {
          this.form = response.data;
          this.datevalue.push(this.form.beginTime);
          this.datevalue.push(this.form.endTime);
          console.log(this.datevalue, "datevalue");
        });
        this.entryBlank.activityId = activityId;
        this.getInfo();
        this.getIsStudent();
        // console.log("qinqiu",this.isStudent)

      }

    },
    methods: {
      /** 活动报名/取消报名 */
      applyEntry: function () {
        this.entryBlank.activityId = this.form.activityId;
        this.entryBlank.pitchOn = (this.entryBlank.pitchOn === undefined || this.entryBlank.pitchOn === -1) ? 0 : -1;
        console.log("applyEntryBlank",this.entryBlank);
        apply(this.entryBlank).then((response) => {
          this.$modal.msgSuccess("操作成功");
        })
      },
      /** 活动报名详情 */
      getInfo: function () {
        getInfoEntryBlank(this.entryBlank).then(response => {
          this.entryBlank = response.data;
          console.log("entryBlank",this.entryBlank);
        })
      },
      /** 穿梭框的数据 */
      findListEntryBlank: function (activityId) {
        listEntryBlank({activityId}).then(response => {
          const {left, right} = filterDataByPitchOn(response.data || []);
          this.transferData = left;
          this.selectValues = right;
          console.log('left, right', left, right)
        });
      },

      /** 选中志愿者 */
      checkedListApply: function () {
        console.log('this.selectValues', {activityId: this.activityId, userIds: this.selectValues});

        listApply({activityId: this.activityId, userIds: [...this.selectValues]}).then(response => {
          console.log(response, 'response');
        })
      },

      /** 是否为学生 */
      getIsStudent: function () {
        isStudent().then(response => {
          // console.log("isStudent",response)
          this.isStudent = response.data;
          // console.log("qinqiuIS",this.isStudent)
        }).finally(()=>{
          if(!this.isStudent){
            this.findListEntryBlank(this.activityId);
          }
        })
      }
    },


  }
</script>

<style scoped>
  .main-left {
    width: 43.4%;
    float: left;
  }

  .main-right {
    width: 53%;
    float: right;
  }


</style>
